<template>
  <div class="ques-list">
    <el-row class="ques-head">
      <el-col :span="2">ID</el-col>
      <el-col :span="2">题目ID</el-col>
      <el-col :span="7">标题</el-col>
      <el-col :span="5">提交者</el-col>
      <el-col :span="4">提交时间</el-col>
      <el-col :span="4">操作</el-col>
    </el-row>
    <div v-if="solutions.length === 0 ">
      <el-empty description="题目列表为空"></el-empty>
    </div>
    <div v-else v-for="s in solutions" :key="s.id">
      <div class="ques-row">
        <el-row style="display: flex;align-items: center">
          <el-col :span="2">{{s.id}}</el-col>
          <el-col :span="2">{{s.pid}}</el-col>
          <el-col :span="7">{{s.title}}</el-col>
          <el-col :span="5">{{s.nickname}}</el-col>
          <el-col :span="4">{{new Date(s.time * 1000).toLocaleString()}}</el-col>
          <el-col :span="4">
            <el-tooltip placement="bottom" content="查看详情">
              <router-link :to="`/work/${s.pid}/article/${s.id}`" target="_blank">
                <el-icon class="m-manage-icon"><info-filled /></el-icon>
              </router-link>
            </el-tooltip>
            &nbsp;&nbsp;
            <el-tooltip placement="bottom" content="删除">
              <el-icon class="m-manage-icon cpt" @click="delSolution(s.id,s.title)"><delete /></el-icon>
            </el-tooltip>
            &nbsp;&nbsp;
            <el-tooltip placement="bottom" content="编辑">
              <el-icon class="m-manage-icon cpt" @click="editSolution(s.id)"><edit /></el-icon>
            </el-tooltip>

          </el-col>
        </el-row>
      </div>
    </div>
  </div>
  <el-dialog v-model="modalVisible" title="修改题解" width="80%" :before-close="onCloseModal">
    <AdminEditSolution v-if="modalVisible" :sid="nowSid"  @doCloseModal="closeModal" />
  </el-dialog>
</template>

<script>
import {Solution} from "../../utils/http/solutions";
import {InfoFilled,Delete,Edit} from "@element-plus/icons";
import {ElMessageBox} from "element-plus";

export default {
  name: "SolutionManage",
  components:{
    InfoFilled,Delete,Edit
  },
  data:function (){
    return{
      solutions : [],
      modalVisible : false,
      nowSid : 0
    }
  },
  methods:{
    editSolution(id){
      this.nowSid = id
      this.modalVisible = true
    },
    async getAllSolutions (){
      let resp = await Solution.getAll()
      this.solutions = resp.data.solutions;
    },
    closeModal(){
      this.modalVisible = false
      this.getAllSolutions()
    },
    onCloseModal(done){
      ElMessageBox.confirm(
        '您的修改尚未保存，确认关闭？',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          done()
        })
        .catch(()=>{})
    },
    delSolution(id,name){
      ElMessageBox.confirm(
        '确定要删除题解 '+name+' 吗',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(async () => {
          let resp = await Solution.delById(id)
          if (resp.success){
            this.$success("删除成功")
            this.getAllSolutions()
          }else {
            this.$error("删除失败 ： "+resp.message)
          }
        })
        .catch(()=>{})
    }
  },
  mounted() {
    this.getAllSolutions()
  }
}
</script>

<style scoped>

.ques-head{
  color: black;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  border-top: 1px solid #f1f1f1;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
}

.ques-row{
  padding: 10px 0;
}


.m-manage-icon {
  font-size: 20px;
  color: #53a8ff;
}

.cpt {
  cursor: pointer;
}

.ques-row:hover{
  background: #eee;
}
</style>
